<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论列表</title>
    <%- include common %>
</head>

<body>
    <%- include("head",{title:"mlist",username})%>
    <div class="container container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-12">
                <h2 class="text-danger  text-left">评论列表</h2>
                <div class="row col-md-3 col-lg-3 col-sm-3" style="margin-top: 10px;margin-bottom: 10px;">
                    <select class="form-control " id="select" data-page="<%- page %>">
                        <option value="5" <%-pageSize==5 ?'selected':'' %>>每页5条</option>
                        <option value="10" <%-pageSize==10 ?'selected':'' %>>每页10条</option>
                        <option value="15" <%-pageSize==15 ?'selected':'' %>>每页15条</option>
                        <option value="20" <%-pageSize==20 ?'selected':'' %>>每页20条</option>
                    </select>
                </div>
                <table style="width:100%" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr class="text-center text-danger">
                            <td>序号</td>
                            <td>评论人</td>
                            <td>评论标题</td>
                            <td>评论内容</td>
                            <td>电影名称</td>
                            <td>评论电影</td>
                            <td>时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <%  if(result.length>0){  %>
                        <%    result.map((item,idx)=>{  %>
                        <tr class="text-center">
                            <td><%- idx+1 %></td>
                            <td><a href="/comment/my?author=<%- item.author %>"> <%- item.author %> <span
                                        class="text-danger"> <%- username == item.author ? '楼主':'' %> </span> </a></td>
                            <td style="width:120px;word-break: break-all;"><a
                                    href="/comment/detail?_id=<%- item._id %>"><%- item.title %></a></td>
                            <td style="width:300px;word-break: break-all;"><%- item.content %></td>
                            <td><%- item.movie.title %></td>
                            <td>
                                <a href="/comment/moviepin?mid=<%-item.mid%>">
                                    <img width="80px" height="80px"
                                        src="<%- item.movie.images.large.replace(/img7/,'img3')%>" alt=""></a></td>
                            <td><%- logintime %></td>
                            <td style="width:240px;">
                                <button class="btn btn-success" id="showbtn" data-item='<%- JSON.stringify(item) %>'
                                    onclick="showThisAnswer(this)" data-toggle="modal"
                                    data-target="#showanswer">查看回复</button>

                                <%    if(username==item.author){  %>
                                <button class="btn btn-info"
                                    onclick="window.location.href='/comment/update?_id=<%- item._id %>'">修改</button>
                                <button onclick="getDelId('<%-item._id%>')" data-toggle="modal" data-target="#delbox"
                                    class="btn btn-danger">删除</button>
                                <%    }   %>

                            </td>
                        </tr>
                        <%    })  %>
                        <tr>
                            <td colspan="8">
                                <button class=" disabled btn btn-danger pull-right">删除所有</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li>
                                            <a href="/comment/mlist?page=<%-page - 1 %>&pageSize=<%- pageSize%>"
                                                aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li><a
                                                href="/comment/mlist?page=<%-page -2  %>&pageSize=<%- pageSize%>"><%- page-2  %></a>
                                        </li>
                                        <li><a
                                                href="/comment/mlist?page=<%-page -1  %>&pageSize=<%- pageSize%>"><%- page-1 %></a>
                                        </li>
                                        <li class="active "><a
                                                href="/comment/mlist?page=<%-page%>&pageSize=<%- pageSize%>">
                                                <%- page %></a></li>
                                        <li><a
                                                href="/comment/mlist?page=<%-page + 1 %>&pageSize=<%- pageSize%>"><%- page + 1 %></a>
                                        </li>
                                        <li><a href="/comment/mlist?page=<%-page + 2 %>&pageSize=<%- pageSize%>"><%- page + 2 %>
                                            </a></li>
                                        <li>
                                            <a href="/comment/mlist?page=<%-page + 1 %>&pageSize=<%- pageSize%>"
                                                aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </td>
                            <td colspan="3">
                                <div class="pull-right" style="display:flex">
                                    <p>第 <%- page %> 页 / 每页 <%- pageSize %> 条</p>
                                    <p>---</p>
                                    <p>总 <%- total %> 条 / 共 <%- totalPage %> 页</p>

                                </div>
                            </td>
                        </tr>
                        <%    }else{  %>
                        <tr>
                            <td colspan="8" class="text-success">
                                暂无数据,请马上添加评论
                            </td>
                        </tr>
                        <%   }  %>

                    </tbody>
                </table>
            </div>

        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="showanswer">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">来自网页回复 -- <span class="text-danger" id="mtitle"></span></h4>
                        <h6 id="thistitle"></h6>
                    </div>
                    <div class="modal-body" id="answerlist">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="gotodetail" onclick="gotodetail(this)">添加回复</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">删除评论</h4>
                    </div>
                    <div class="modal-body">
                        <p>你确定要删除这条评论吗?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="delsubmit()">确定删除</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    <%- include footer %>

    <script>
        var itemId = null;
        function getDelId(_id){
            itemId = _id;
        }

        function delsubmit(){
            console.log(itemId)
            $.ajax({
                url:"/comment/delsubmit",
                method:"POST",
                data:{
                    _id:itemId
                },
                success:res=>{
                    console.log(res);
                    if(res.code==200){
                        window.location.reload();
                    }
                }
            })
        }

        function gotodetail(that){
            console.log('gotodetail')
            window.location.href = "/comment/detail?_id="+$(that).attr("data-id")
        }

        function showThisAnswer(that) {
            var item = JSON.parse($(that).attr('data-item'))
            $("#mtitle").html(item.movie.title);
            $("#thistitle").html(item.title);
            $("#answerlist").html("");
            $("#gotodetail").attr("data-id",item._id);
            var oDiv = "";
            item.answer && item.answer.forEach(val => {
                oDiv += `<div style="display: flex;justify-content: space-between;">
                                <p class=" text-warning"> #  ${val.id} </p>
                                <p> 来自:${val.author ? val.author : '佚名'}</p>                               
                            </div>
                            <div style="display: flex;justify-content: space-between;border-bottom:1px dashed red;padding-bottom:5px">
                                <p class=" text-danger"> 内容 :${val.subtitle}</p>
                                <p class=" text-warning"> 时间 :${val.logintime}</p>
                            </div>`;
            });
            $("#answerlist").html(oDiv?oDiv:"暂无网友回复");
        }
        $("#select").on("change", function () {
            console.log($(this).val())
            var page = $(this).attr("data-page");
            var pageSize = $(this).val();
            window.location.href = "/comment/mlist?page=" + page + "&pageSize=" + pageSize;
        })
    </script>
</body>

</html>